//搜索约车
//TODO 尚未完善
import React, {Component} from 'react'
import {View, Text, Image, TouchableOpacity, TextInput, FlatList} from 'react-native'
import styles from '../../configs/styles'
import Helper from '../../helpers/index'
import Loading from '../common/loading'
import {StyleSheet, Dimensions} from 'react-native'

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

//样式统一写在这
const style = StyleSheet.create({
  topTextLabel: {
    padding: 10
  },
  topTime:{
    padding: 10
  },
  topBlock:{
    backgroundColor: 'white',
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderColor: 'lightgrey',
    alignItems: 'center',
    paddingTop: 15,
    paddingBottom: 15
  }
})

class searchCarAppoint extends Component{
  static navigationOptions = ({navigation}) => {
    return {
      title: '派车查询'
    }
  };

  constructor(props){
    super(props)
    this.state = {
      no: '',
      startDate: null,
      startTime: null,
      endDate: null,
      endTime: null,
      resultData: [],
      loading: false,
      page: 1,
      flipping: false
    }
  }
  refresh = () => {
    this.setState({
      page: 1,
      data: []
    }, () => {
      this.doSearch()
    })
  };

  //翻页
  Flip = () => {
    if (this.state.flipping) return;
    this.setState({flipping: true, page: this.state.page + 1}, () => {
      this.doSearch()
    })
  };

  //用于给FlatList的每一条item指定一个key
  _keyExtractor = (item, index) => index;

  goApply = (apply_id)=>{
    this.props.navigation.navigate('apply_show', {apply_id})
  }
  doSearch = ()=>{
    return null
  }



  searchBlock = ()=>{
    return (
      <View style={style.topBlock}>
        <View style={{flex: 1}}>
          <View style={{flexDirection: 'row'}}>
            <Text style={style.topTextLabel}>日期</Text>
            <Text style={[this.state.startDate&&styles.text_blue, style.topTime]}>{this.state.startDate||'未设置'}</Text>
          </View>
          <View style={{flexDirection: 'row'}}>
            <Text style={style.topTextLabel}>时间</Text>
            <Text style={[this.state.startTime&&styles.text_blue, style.topTime]}>{this.state.startTime||'未设置'}</Text>
          </View>
        </View>
        <View><Text style={{fontSize: 25, color: 'grey', padding: 15}}>—</Text></View>
        <View style={{flex: 1}}>
          <View style={{flexDirection: 'row'}}>
            <Text style={style.topTextLabel}>日期</Text>
            <Text style={[this.state.endDate&&styles.text_blue, style.topTime]}>{this.state.endDate||'未设置'}</Text>
          </View>
          <View style={{flexDirection: 'row'}}>
            <Text style={style.topTextLabel}>时间</Text>
            <Text style={[this.state.endTime&&styles.text_blue, style.topTime]}>{this.state.endTime||'未设置'}</Text>
          </View>
        </View>
      </View>
    )
  };

  _renderItem = ()=>{

  };

  render(){
    return (
      <View style={{flex: 1}}>
        {this.searchBlock()}
        <View style={{backgroundColor: 'white'}}>
          <TouchableOpacity onPress={this.doSearch}
                            style={{backgroundColor: '#3980f4',margin: 10, borderRadius:6, alignItems: 'center'}}>
            <Text style={{color: 'white', padding: 10}}>查询</Text>
          </TouchableOpacity>
        </View>
        {
          this.state.loading ?
            (<Loading/>) :
            (
              <View bounces={false} style={{flex: 1}}>
                {Helper.listBlankInfo(this.state.resultData)}
                <FlatList
                  data={this.state.resultData}
                  extraData={this.state}
                  keyExtractor={this._keyExtractor}
                  renderItem={this._renderItem}
                  refreshing={this.state.loading}
                  onRefresh={this.refresh}
                  onEndReachedThreshold={0.1}
                  onEndReached={this.Flip}
                />
              </View>
            )
        }

      </View>
    )
  }
}
export default searchCarAppoint